<template>
  <div class="header-main">
    <div class="header-box">
      <div class="header-l">
        <img src="./image/ruhua.png" alt="">
      </div>
      <div class="header-r">
        <a href="http://www.tangxiaowen.com" target="_blank">店主博客</a>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=846506584&site=qq&menu=yes" target="_blank">店主QQ</a>
        <a href="https://gitee.com/tangxiaowen_com/rh_tangxiaowen_web" target="_blank">gitee源码</a>
        <a href="javascript:;" @click="drawer = true" type="primary">盈利模式</a>
      </div>

      <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :append-to-body="true"
          :modal="false"
          :with-header="false">
          <el-collapse @change="handleChange" accordion style="padding-left:15px;">
            <el-collapse-item title="1，盈利模式" name="1">
              <div>一分钟了解淘宝客 <a href="https://baike.baidu.com/item/%E6%B7%98%E5%AE%9D%E5%AE%A2" target="_blank">传送门</a></div>
            </el-collapse-item>
            <el-collapse-item title="2，商品来源" name="2">
              <div>本店商品全部来源淘宝，值得信赖</div>
            </el-collapse-item>
            <el-collapse-item title="3，联系安装" name="3">
              <div>本站点开源免费，如需指导安装请联系店主</div>
              <div>微信:txw846506584</div>
              <div>邮箱:84650654@qq.com</div>
            </el-collapse-item>
          </el-collapse>
      </el-drawer>

    </div>
  </div>
</template>

<script>
  export default {
    name: "v-header",
    data() {
      return {
        top: false,
        drawer: false,
        activeName: '1'
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then( () => {
            done();
          })
          .catch( () => {});
      },
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style scoped>
.header-main{
  width: 100%;
  background: #1c1f21;
  display: flex;
  z-index: 99;
  justify-content: center;
  position: fixed;
  top:0px;
}
.header-main .header-box{
  width: 1200px;
  height: 64px;
  line-height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header-box .header-r a{
  line-height: 64px;
  color: white;
  padding:5px 10px;
  box-sizing: border-box;
  text-decoration: none;
}
.header-box .el-collapse{
  padding:15px;
}
</style>